<template>
  <div class="material-print" ref="print">
    <h2>{{ title }}</h2>
    <table cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>序号</th>
          <th>销售员</th>
          <th>销售订单号</th>
          <th>业务类型</th>
          <th>订单交期</th>
          <th>订单状态</th>
          <th>物料编码</th>
          <th>物料名称</th>
          <th>订单数量</th>
          <th>质量要求</th>
          <th>包装要求</th>
          <th>件数</th>
          <th>目的国家</th>
        </tr>
      </thead>
      <tbody v-if="printData.length > 0">
        <tr v-for="(item, index) in printData" :key="index">
          <td>{{ item.number }}</td>
          <td>{{ item.workStaff }}</td>
          <td>{{ item.omCode }}</td>
          <td>{{ item.workType }}</td>
          <td>{{ item.deliverDate }}</td>
          <td>{{ item.deliverStatus | filterDeliver }}</td>
          <td>{{ item.invCode }}</td>
          <td style="width: 150px">
            {{ item.invName }} {{ item.invAttribute }}
          </td>
          <td>{{ item.quantity }}</td>
          <td class="bill-remarks">
            <div
              style="white-space: pre-line"
              v-html="item.qualityRemarks"
            ></div>
          </td>
          <td class="bill-remarks">
            <div style="white-space: pre-line" v-html="item.pkgRemarks"></div>
          </td>
          <td>{{ item.piece }}</td>
          <td>{{ item.country }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  props: {
    printData: {
      type: Array,
      default() {
        return [];
      },
    },
    title: {
      type: String,
      default() {
        return "";
      },
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
@media print {
  .material-print {
    display: block !important;
  }
}

.material-print {
  display: none;

  h2 {
    text-align: center;
    color: #515a6e;
  }

  table {
    width: 100%;
    margin-bottom: 20px;
    border-left: 1px solid #ccc;

    th {
      text-align: center;
      font-size: 14px;
      padding: 5px;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      border-top: 1px solid #ccc;
    }

    td {
      text-align: center;
      font-size: 13px;
      color: #606266;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      padding: 5px;
    }
  }
}
</style>
